<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Comments</title>
    <link rel="stylesheet" href="/blog/private/subpage/css/addUser.css">
</head>
<body>
<div class="useradd-page">
    <p class="useradd-title">添加用户</p>
    <p class="useradd-describe">新建一个用户，并把这个用户添加到此站点</p>
    <ul>
        <li>
            <span>用户名<p>( * 此项必填 )</p></span><input id="userName" type="text">
        </li>
        <hr>
        <li>
            <span>姓名</span><input id="name" type="text">
        </li>
        <hr>
        <li>
            <span>密码<p>( * 此项必填 )</p></span><input id="passwd" type="password">
        </li>
        <hr>
        <li>
            <span>确认密码<p>( * 此项必填 )</p></span><input id="repeat-passwd" type="password">
        </li>
        <hr>
        <li>
            <span>性别</span><input class="check-input" type="radio" name="radioGroup" value="男">男<input  class="check-input"type="radio" name="radioGroup">女
        </li>
        <hr>
        <li>
            <span>城市</span><input id="city" type="text">
        </li>
        <hr>
        <li>
            <span>电话号码</span><input id="telephone" type="tel">
        </li>
        <hr>
        <li>
            <span>微信号</span><input id="wechat" type="text">
        </li>
        <hr>
        <li>
            <span>QQ号</span><input id="QQ"type="tel">
        </li>
        <hr>
        <li>
            <span>电子邮箱</span><input id="email" type="text">
        </li>
        <hr>
        <li>
            <span>是否启用</span><input id="ifSet" class="check-input" type="checkbox">
        </li>
        <hr>
        <li class="upLoad">
            <span>上传头像</span><input id="upload" type="file" formenctype="multipart/form-data">
        </li>
    </ul>
    <div class="button-container">
        <b></b>
        <div class="button">
            添  加
        </div>
    </div>
</div>
<script defer="defer">
    var lis=document.querySelectorAll("li input");
    var spans=document.querySelectorAll("li span");
    var spanp=document.querySelectorAll("li span p");

    var username = document.getElementById("userName");
    var passwd = document.getElementById("passwd");
    var repeatpasswd=document.getElementById("repeat-passwd");
    var telephone=document.getElementById("telephone");
    var QQ = document.getElementById("QQ");
    var email = document.getElementById("email");
    var notice=document.querySelector(".button-container b");
    var button=document.getElementsByClassName("button")[0];

    for(var i=0;i<lis.length;i++)
    {
        (
            function (i) {
                lis[i].onfocus=function () {
                    lis[i].parentElement.style.height="100px";
                    lis[i].parentElement.className=("on");
                    notice.innerHTML="";
                    if(i>=5) {
                        spans[i - 1].style.lineHeight = "100px";
                        spans[i - 1].style.color = "white";
                    }
                    else {
                        spans[i].style.lineHeight = "100px";
                        spans[i].style.color = "white";
                    }
                    if(i===0)
                        spanp[0].style.color = "white";
                    if(i===2)
                        spanp[1].style.color = "white";
                    if(i===3)
                        spanp[2].style.color = "white";
                }
                lis[i].onblur=function () {
                    lis[i].parentElement.style.height="60px";
                    lis[i].parentElement.className=("");
                    if(i>=5) {
                        spans[i - 1].style.lineHeight = "60px";
                        spans[i - 1].style.color= "black";
                    }
                    else{
                        spans[i].style.lineHeight="60px";
                        spans[i].style.color = "black";
                    }
                    if(i===0)
                        spanp[0].style.color= "crimson";
                    if(i===2)
                        spanp[1].style.color= "crimson";
                    if(i===3)
                        spanp[2].style.color= "crimson";
                }

            }(i)
        )
    }

    button.onclick = function () {
        if(/^$/.test(username.value))
            notice.innerHTML = "*用户名不能为空!请输入用户名";
        else if(/^$/.test(passwd.value))
            notice .innerHTML="*密码不能为空!请输入密码";
        else if(repeatpasswd.value!==passwd.value)
            notice.innerHTML="*两次密码不一致!请重新输入"
        else if (!/^[1-9][0-9]{6,10}$/.test(telephone.value)) {
            notice.innerHTML = "*输入的电话号码无效!请重新输入电话";
            telephone.value="";
        }
        else if(!/^[0-9]{5,10}$/.test(QQ.value)){
            notice.innerHTML="*输入的QQ号无效! 请重新输入";
            QQ.value="";
        }
        else if(!/\w+@\w+.com$/.test(email.value))
        {
            notice.innerHTML="*输入的电子邮箱账号无效! 请重新输入";
            email.value="";
        }
        sendData();
    };
    function sendData() {
        // alert("用户名："+username.value)
        // alert("姓名："+document.getElementById("name").value)
        // alert("密码："+passwd.value)
        // var radiobuttoms=document.getElementsByName("radioGroup");
        // if(radiobuttoms[0].checked==true)
        //     alert(radiobuttoms[0].checked=true)
        // else if(radiobuttoms[1].checked)
        //     alert("性别:"+"女")
        // else
        //     alert("性别:"+"无")
        // alert("城市：" + document.getElementById("city").value);
        // alert("电话号码："+telephone.value)
        // alert("微信"+document.getElementById("wechat").value);
        // alert("QQ："+QQ.value)
        // alert("电子邮箱：" + email.value);
        // var ifset = document.getElementById("ifSet");
        // if(ifset.checked)
        //     alert("是否启用:"+"是");
        // else
        //     alert("是否启用:"+"否");

    }
</script>
</body>
</html>>